<template>
  <!-- 搜索框 -->
  <input type="text" id="tipinput" placeholder="输入地址进行搜索" />

  <!-- 显示搜索建议 -->
  <ul class="search-results" v-if="searchResults.length">
    <li
      v-for="(result, index) in searchResults"
      :key="index"
      @click="selectResult(result)"
      style="cursor: pointer; padding: 8px"
    >
      {{ result.name }}
    </li>
  </ul>
</template>

<script setup>
  import { ref, defineEmits } from "vue";
  const props = defineProps({
    searchResults: {
      type: Array,
      default: () => [],
    },
  });
  const searchResults = ref([]);
  const emit = defineEmits(["select"]);

  const selectResult = result => {
    emit("select", result);
  };
</script>

<style lang="scss" scoped>
  #tipinput {
    position: absolute;
    top: 20px;
    left: 10px;
    z-index: 10;
    padding: 10px;
    width: 300px;
    border: 1px solid #ccc;
  }
  .amap-sug-result {
    z-index: 9999;
    visibility: visible;
  }
  .search-results {
    position: absolute;
    top: 60px;
    left: 10px;
    z-index: 10;
    background: white;
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid #ccc;
  }
</style>
